<template>
    <el-form :model="properties" ref="formRef" :rules="formRules" labelWidth="auto">
        <el-form-item label="组件编码" prop="code">
            <el-input v-model="properties.code" placeholder="组件编码" clearable />
        </el-form-item>

        <el-form-item label="label名称" prop="labelName">
            <el-input v-model="properties.labelName" placeholder="label名称" clearable />
        </el-form-item>

        <el-form-item label="显示提示内容" prop="selectPlaceHolder">
            <el-input v-model="properties.selectPlaceHolder" style="width: 100%" placeholder="显示提示内容" />
        </el-form-item>

        <el-form-item label="支持清空">
            <el-switch v-model="properties.isClearable"/>
        </el-form-item>

        <el-form-item label="支持搜索">
            <el-switch v-model="properties.isFilterable"/>
        </el-form-item>

        <el-form-item label="支持多选">
            <el-switch v-model="properties.isMultiple"/>
        </el-form-item>

        <el-form-item label="折叠多选标签" v-if="properties.isMultiple">
            <el-switch v-model="properties.isCollapseTags"/>
        </el-form-item>

        <el-form-item label="鼠标悬浮展示所有标签" v-if="properties.isMultiple && properties.isCollapseTags">
            <el-switch v-model="properties.isCollapseTagsTooltip"/>
        </el-form-item>

        <el-form-item label="标签折叠阈值" v-if="properties.isMultiple && properties.isCollapseTags">
            <el-input-number v-model="properties.maxCollapseTags" :min="1"/>
        </el-form-item>

        <el-form-item label="下拉选择Label字段" prop="optionLabel">
            <el-input v-model="properties.optionLabel" style="width: 100%" placeholder="下拉选择Label字段" />
        </el-form-item>

        <el-form-item label="下拉选择Value字段" prop="optionValue">
            <el-input v-model="properties.optionValue" style="width: 100%" placeholder="下拉选择Value字段" />
        </el-form-item>

        <el-form-item label="下拉选择Child字段" prop="optionChildren">
            <el-input v-model="properties.optionChildren" style="width: 100%" placeholder="下拉选择Child字段" />
        </el-form-item>

        <el-divider content-position="left" style="margin-top: 10px">下拉值获取</el-divider>

        <YwuFormValueCommon :properties="properties" :formBuildList="formBuildList" />
    </el-form>
</template>

<script setup lang="ts" name="YwuFormCascaderSelectDrawer">
import {computed, defineProps, ref} from "vue";
import YwuFormValueCommon from "@/views/bpmn/form/common/YwuFormValueCommon.vue";

let props = defineProps(['properties', 'formBuildList']);

let properties = computed(() => {return props['properties']})
let formBuildList = computed(() => {return props['formBuildList']})

const formRef = ref(null)

const formRules = ref({
    labelName: [
        { required: true, message: '请输入label名称', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入组件编码', trigger: 'blur' }
    ],
    selectPlaceHolder: [
        { required: true, message: '请输入显示提示内容', trigger: 'blur' }
    ],
    optionLabel: [
        { required: true, message: '请输入下拉选择Label字段', trigger: 'blur' }
    ],
    optionValue: [
        { required: true, message: '请输入下拉选择Value字段', trigger: 'blur' }
    ],
    optionChildren: [
        { required: true, message: '请输入下拉选择Child字段', trigger: 'blur' }
    ]
})

const validateForm = () => {
    return formRef.value?.validate()
}

defineExpose({
    validateForm
})
</script>

<style scoped lang="less">

</style>